import { Row, Col, Button, Image, Modal } from 'antd';
import { WeiboCircleOutlined } from '@ant-design/icons';
import React, { useRef, useMemo, useEffect, useState } from 'react';
import { financialOverviewFn } from '@/apis/summanze';
import Online from './online';

interface TableItem {
  tit: string;
  num: any;
  id: number;
  render?: Function;
}

interface Props {
  cancle: Function;
  isModalVisible: boolean;
}

// 在线充值

function account() {
  const [table, settable] = useState<TableItem[] | null[]>([null]);
  const [isModalVisible, setIsModalVisible] = useState<boolean>(false);
  useEffect(() => {
    financialOverviewFn({}).then((res: any) => {
      const { adverSpendToday, cashBalance, dayBudgetAmount, totalAmount, virtualBalance } = res;

      const arr: TableItem[] = [
        {
          tit: '现金余额',
          id: 1,
          num: totalAmount,
          render: function () {
            return (
              <span
                className="pointer"
                onClick={() => {
                  setIsModalVisible(true);
                }}
              >
                线上充值
              </span>
            );
          },
        },
        {
          tit: '赠送余额 ',
          num: virtualBalance,
          id: 2,
        },
        {
          tit: '今日广告消耗 ',
          num: adverSpendToday,
          id: 3,
        },
        {
          tit: '账户日预算 ',
          num: dayBudgetAmount,
          id: 4,
        },
      ];
      settable(arr);
    });
  }, []);

  function handleOk() {}
  return (
    <div>
      <Row>
        {table.map((item: TableItem | null) => {
          return (
            <Col span={6}>
              <Row className="f fac" key={item?.id}>
                <Col span={6}>
                  <Image preview={false} style={{ borderRadius: '50%' }} width={100} src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png" />
                </Col>
                <Col className="f fdc" span={18}>
                  <p>{item?.tit}</p>
                  <div className="f">
                    <p>{item?.num === 40000000 ? '不限' : item?.num}</p>
                    <p>{item?.render ? item.render() : ''}</p>
                  </div>
                </Col>
              </Row>
            </Col>
          );
        })}
      </Row>
      {/* 弹窗 */}
      {Online({
        cancle: () => {
          setIsModalVisible(false);
        },
        isModalVisible,
      })}
    </div>
  );
}

export default account;
